<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-26 19:47:39
 * @LastEditors: 47
 * @LastEditTime: 2023-01-17 20:09:10
-->
<template>
  <div class="test">
    <!-- {{courseTestList}} -->
    <!-- 有考试时 -->
    <div class="have" v-if="courseTestList.length" v-for="test in courseTestList" :key="test.test_id">
      
      <!-- 没提交 -->
      <div class="task-inform" @click="goStartExam(test.test_id)" v-if="test.test_status == 0">
        <van-cell>

          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="inform-box">

              <!-- 通知图片 -->
              <div :class="{'active-inform-img':true,'unactive-inform-img':false}">
                <span class="iconfont img-font">考试</span>
              </div>

              <!-- 通知内容 -->
              <div class="inform-message">

                <span class="message">
                  {{test.test_title}}
                  <!-- 关于2022年秋季学期形势与政策课期末考试作业 -->
                </span>

                <span class="time">
                  <span class="submit">未提交</span>
                  <span class="residue">
                    <!-- 剩余1107小时41分钟 -->
                    {{test.test_end_time}}
                    </span>
                </span>

              </div>
            </div>
          </template>

        </van-cell>
      </div>

      <!-- 已经提交 -->
      <div class="task-inform" @click="goExamSuccess(test.test_id)" v-if="test.test_status == 1">
        <van-cell>

          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="inform-box">

              <!-- 通知图片 -->
              <div :class="{'active-inform-img':false,'unactive-inform-img':true}">
                <span class="iconfont img-font">考试</span>
              </div>

              <!-- 通知内容 -->
              <div class="inform-message">

                <span class="message">
                  {{test.test_title}}
                  <!-- 关于2022年秋季学期形势与政策课期末考试作业 -->
                </span>

                <span class="time">
                  <span class="submit">已提交</span>
                </span>

              </div>
            </div>
          </template>

        </van-cell>
      </div>

    </div>

    <!-- 没有考试 -->
    <div class="no-have" v-if="!courseTestList.length">
      暂无考试
    </div>

  </div>

</template>

<script setup>
// 引入路由
import {useRouter,useRoute} from 'vue-router'
// 引入仓库
import { useCourseStore } from '@/stores/course'
import { onMounted } from '@vue/runtime-core'
import { storeToRefs } from 'pinia'


//实例化仓库对象
const course = useCourseStore()
//解构方法
const { getCourseTestList } = course
//解构数据(如果想要处理响应式数据，使用storeToRefs)
const { courseTestList,courseId} = storeToRefs(course)

onMounted(async() => {
  //页面挂载完毕后，展示考试列表
  await getCourseTestList(courseId.value,1)
})

// 创建路由对象
const router = useRouter()
const route = useRoute()

// 跳转到开始考试页面
const goStartExam = (testId) => {
    router.push({
      name:'startexam',
      params:{
        testId
      }
    })
}

// 跳转到交卷成功页面
const goExamSuccess = (testId) => {
    router.push({
      name:'examsuccess',
      params:{
        testId
      }
    })
}
</script>

<style lang="less" scoped>
.test{
  
  .have{
 
    .task-inform{
    border-bottom: 1px solid #f0f0f0;
    
    .inform-box{
      display: flex;
      flex-flow: row;
      align-items: center;

      .active-inform-img{
        background-color: #33adff;
      }
      .unactive-inform-img{
        background-color: #c4c9cc;

      }
      .active-inform-img,
      .unactive-inform-img{
        width: 50px;
        height: 50px;
        border-radius: 7px;

        .img-font{
          margin-left: 7px;
          line-height: 50px;
          font-size: 18px;
          color: #f0fcfc;
        }
      }

      .inform-message{
        display: flex;
        flex-flow: column;
        margin-left: 16px;
        width: 280px;

        .time{
          width: 270px;
          display: flex;
          justify-content: space-between;
          color: #c2c2c2;
          font-size: 12px;
        }
      }
      
    }

    .van-cell__right-icon{
      margin-top: 15px;
    }
    }
  }

  .no-have{
    width: 100%;
    height: 620px;
    text-align: center;
    line-height: 620px;
    font-size: 13px;
    color: #c2c2c2;
  }
}

</style>
